<template>
  <div class="main-content">
    <div class="header mb-3">
      <div class="container">
        <!-- Body -->
        <div class="header-body border-bottom py-3">
          <div class="row align-items-end">
            <div class="col">
              <!-- Title -->
              <h2 class="header-title">
                Jupiter 代码生成
              </h2>
            </div>
            <div class="col-auto">
              <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" id="toast" data-autohide="false">
                <div class="toast-header">
                  <i class="fa fa-exclamation-triangle text-danger"></i>
                  <strong class="mr-auto ml-2">{{hint}}</strong>
                  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-6">
          <a class="btn btn-link" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">数据库配置</a>
         </div>
        <div class="col-6">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">生成路径配置</button>
        </div>
      </div>
      <div class="row mt-2">
        <div class="col">
          <div class="collapse multi-collapse show" id="multiCollapseExample1">
            <div class="card card-body">
              <div class="card-text">
                <form>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label" >名称</label>
                    <input class="col-sm-10 form-control" type="text"  id="name" v-model="sqlSource.name">
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">地址 </label>
                    <input type="text" class="col-sm-10 form-control" id="host" v-model="sqlSource.host" placeholder="如: localhost">
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">用户名 </label>
                    <input type="text" class="col-sm-10 form-control" id="username" v-model="sqlSource.username">
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">密码 </label>
                    <input type="text" class="col-sm-10 form-control" id="password" v-model="sqlSource.password">
                  </div>
                  <button type="button" class=" card-link btn btn-primary btn-sm" @click="check"> 查询
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse show" id="multiCollapseExample2">
            <div class="card card-body">
              <form>
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label" >作者</label>
                  <input class="col-sm-9 form-control" type="text"  id="author" v-model="sqlSource.author">
                </div>
                <div class="form-group row">
                <label class="col-sm-3 col-form-label" >后台模块路径</label>
                <input class="col-sm-9 form-control" type="text"  id="dir" v-model="sqlSource.dir">
              </div>
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">后台模块包名 </label>
                  <input type="text" class="col-sm-9 form-control" id="packageName" v-model="sqlSource.packageName" placeholder="如: localhost">
                </div>
<!--                <div class="form-group row">-->
<!--                  <label class="col-sm-3 col-form-label" >模块名</label>-->
<!--                  <input class="col-sm-9 form-control" type="text"  id="moduleName" v-model="sqlSource.moduleName">-->
<!--                </div>-->
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">前端模块路径 </label>
                  <input type="text" class="col-sm-9 form-control" id="frontDir" v-model="sqlSource.frontDir">
                </div>
                <button type="button" class=" card-link btn btn-primary btn-sm" @click="submit"> 生成代码
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <table class="table mt-4 ">
        <thead>
        <tr class="table-primary">
          <th scope="col">
              <input type="checkbox"  v-model="allChecked">
          </th>
          <th scope="col">表名</th>
          <th scope="col">备注</th>
          <th scope="col">创建时间</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="item in tableList">
          <th scope="row">
            <input type="checkbox" v-model="item.checked">
          </th>
          <td>{{item.table_name}}</td>
          <td>{{item.table_comment}}</td>
          <td>{{item.create_time}}</td>
        </tr>

<!--        <tr>-->
<!--          <th scope="row">2</th>-->
<!--          <td>Jacob</td>-->
<!--          <td>Thornton</td>-->
<!--          <td>@fat</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <th scope="row">3</th>-->
<!--          <td>Larry</td>-->
<!--          <td>the Bird</td>-->
<!--          <td>@twitter</td>-->
<!--        </tr>-->
        </tbody>
      </table>
      <div class="d-flex justify-content-center" >
        <div class="spinner-border text-success" role="status" v-show="loading">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  module.exports = {
    name: 'GeneratorProject',
    data() {
      return {
        searchName: '',
        allChecked: false,
        sqlSource: {
          name: 'jupiter_admin',
          host: 'localhost',
          username: 'jupiter',
          password: '123456',
          driver: 'com.mysql.jdbc.Driver',
          driverType: 'jdbc',
          type: 'mysql',
          dir: "/Users/edgar/workspace/",
          packageName: "com.edgardeng.jupiter",
          frontDir: "/Users/edgar/workspace/jupiter/jupiter-system-ui",
          author: "Edgar Deng",
          moduleName: "system"
        },
        tableList: [],
        hint: '',
        loading: false
      }
    },
    watch: {
      allChecked (val1, val2) {
        console.log("allChecked", val1, val2)
        for (let item of this.tableList) {
          item.checked = val1
        }
      }
    },
    created() {
      let item = window.localStorage.getItem("generator.code")
      if (!item || item === 'undefined') {
        return
      }
      let result = JSON.parse(item)
      this.sqlSource.name = result.name
      this.sqlSource.host = result.host
      this.sqlSource.username = result.username
      this.sqlSource.password = result.password
      this.sqlSource.driver = result.driver
      this.sqlSource.driverType = result.driverType
      this.sqlSource.type = result.type
      this.sqlSource.dir = result.dir
      this.sqlSource.frontDir = result.frontDir
      this.sqlSource.packageName = result.packageName
      this.sqlSource.author= result.author
    },
    methods: {
      toast (text) {
        this.hint = text
        $('#toast').toast('show')
        setTimeout(function () {
          $('#toast').toast('hide')
        },3000)
      },
      submit() {
        // 保存参数 下次使用
        let tables = []
        for (let item of this.tableList) {
          if (item.checked) {
            tables.push(item.table_name)
          }
        }
        if (tables.length < 1) {
          this.toast('请选择数据表')
          return
        }
        window.localStorage.setItem("generator.code", JSON.stringify(this.sqlSource))
        this.sqlSource.tables = tables.toString()
        this.$emit('generate', this.sqlSource)

      },
      check() {
        var _self = this
        this.loading = true
        $.get('http://localhost:8094/api/generator/table', this.sqlSource, function (data, status) {
          _self.tableList =  data
          _self.loading = false
        })
      }
    }
  }
</script>
